<template>
    <div class="box">
        <!-- 顶部搜索框 -->
        <div class="search">
            <el-input class="inputUser" v-model="id" placeholder="请输入类目ID"></el-input>
            <el-input class="inputNumber" v-model="name" placeholder="请输入类目名称"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="add">添加</el-button>
            <!-- 嵌套的表单 用来添加或编辑内容 -->
            <el-dialog :title="editOrAdd?'编辑':'创建'" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules">
                <el-form-item 
                label="类目名称" 
                :label-width="formLabelWidth"
                prop="name"
                >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="关键字" :label-width="formLabelWidth">
                    <el-input v-model="form.keywords" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="级别" :label-width="formLabelWidth">
                    <!-- 选择器  一级类目  -->
                    <template>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="父类目" v-show="this.value=='选项2'" :label-width="formLabelWidth">
                    <!-- 选择器  二级类目  -->
                    <template>
                        <el-select v-model="valuePid" placeholder="请选择">
                            <el-option
                            v-for="item in optionsPid"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="类目图标" :label-width="formLabelWidth">
                    <!-- 上传图片内容 -->
                    <el-upload
                    class="avatar-uploader"
                    action="http://39.105.50.203:8083/admin/storage/create"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessIcon">
                        <img v-if="iconUrl" :src="iconUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类目图片" :label-width="formLabelWidth">
                    <!-- 上传图片内容 -->
                    <el-upload
                    class="avatar-uploader"
                    action="http://39.105.50.203:8083/admin/storage/create"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类目简介" :label-width="formLabelWidth">
                    <el-input v-model="form.desc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
            </el-dialog>
            <!-- 导出excel表格 -->
            <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="商品类目信息.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="primary" icon="el-icon-download" >导出</el-button>
              </download-excel>
        </div>
        <!-- 表格区域 -->
        <el-table
            class="elTable"
            :data="tableData"
            border
            >
            <el-table-column
            prop="id"
            label="类目ID"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="name"
            label="类目名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="iconUrl"
            label="类目图标"
            width="120">
            <template slot-scope="scope">
                <img class="iconSize" :src="scope.row.iconUrl" alt="">
                <!-- <el-button
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
            </el-table-column>
            <el-table-column
            prop="picUrl"
            label="品牌商图片"
            width="120">
            <template slot-scope="scope">
                <img class="imageSize" :src="scope.row.picUrl" alt="">
            </template>
            </el-table-column>
            <el-table-column
            prop="keywords"
            label="关键字"
            width="120"
            >
            </el-table-column>
            <el-table-column
            prop="desc"
            label="简介"
            >
            </el-table-column>
            <el-table-column
            prop="level"
            label="级别"
            width="120">
                <template slot-scope="scope">
                    <el-tag v-show="scope.row.level=='L1'" >一级类目</el-tag>
                    <el-tag v-show="scope.row.level=='L2'" type="info">二级类目</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            prop="pid"
            label="父类目ID"
            width="120">
            </el-table-column>
            <el-table-column
            prop=""
            label="操作"
            width="240">
                <template slot-scope="scope">
                    <el-button
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { categoryList,categoryCreate,categoryl1,categoryUpdate,categoryDelete } from '@/api/shopping'

import { getToken } from '@/utils/auth' // get token from cookie
export default{
    name:'categoryList',
    props:[],
    data(){
        return{
            id:'',
            name:'',
            tableData:[],
            currentPage:1,
            limit:10,
            total:1,
            title:'商品类目信息',//excel表格标题
            editOrAdd:false,
            json_fields: {
                "类目ID":'id',
                "名称":'name',
                "关键词":'keywords',
                "级别":'level',
                "父类目ID":'pid',
                "类目图标":'iconUrl',
                "类目图片":'picUrl',
                "简介":'desc',

            },
            // 导出excel表格
            DetailsForm: [],
            // 嵌套表单内容
            dialogFormVisible: false,//决定弹出层是否弹出
            // 弹出层input 关联的信息
            form: {
                name: '',
                picUrl:'',
                floorPrice:'',
                desc: ''
            },
            formLabelWidth: '120px',//表单内文字内容的宽度
            // 一级类目内容
            options: [{
                value: '选项1',
                label: '一级类目'
                }, {
                value: '选项2',
                label: '二级类目'
            }],
            value: '选项1',
            // 二级类目内容
            optionsPid: [],
            valuePid: '',
            // 上传图标图片
            iconUrl:'',
            // 上传图片
            imageUrl: '',
            // 上传图片 请求接口需要带上这个请求头才能通过验证
            headers:{
                'X-Mymall-Admin-Token':getToken()
            },
            // 验证规则
            rules: {
                name: [{ required: true, message: '输入的内容不能为空', trigger: 'blur' }]
            }
        }
    },
    // 方法
    methods:{
        // 制造商商品列表接口 函数
        categoryList(data){
            categoryList(data).then(res=>{
                console.log(res);
                this.tableData=res.data.items //赋值给表格内容数据渲染
                this.total=res.data.total  // 将总条数拿出来
                this.DetailsForm=res.data.items  // 导出表格需要的数据
            })
            // 二级目录数据渲染
            categoryl1().then(res=>{
                    console.log(res);
                    this.optionsPid=res.data
            })
            console.log(this.optionsPid);
        },
        // 搜索按钮
        search(){ 
            this.categoryList({
                page:this.currentPage,
                limit:this.limit,
                id:this.id,
                name:this.name,
            })
        },
        // 分页方法
        handleSizeChange(e){
            this.currentPage=1
            this.limit=e
            console.log(this.limit);
            this.categoryList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                mobile:this.mobile,
            })
        },
        handleCurrentChange(e){
            this.currentPage=e
            this.categoryList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                mobile:this.mobile,
            })
            console.log(this.currentPage);
        },
        // 添加内容
        add(){
            this.dialogFormVisible = true
            this.editOrAdd=false
            this.imageUrl='',
            this.form= {
                name: '',
                picUrl:'',
                floorPrice:'',
                desc: ''
            }
            
            },
        // 编辑内容
        handleEdit(index, row){
            this.dialogFormVisible = true //使弹出层显示
            this.editOrAdd=true//true 文字是编辑
            console.log(row);
            this.form=row
            this.imageUrl=row.picUrl
            this.iconUrl=row.iconUrl
            this.value=(row.level=='L2'?'选项2':'选项1')
            this.valuePid=row.pid
            
        },
        // 删除内容
        handleDelete(index, row){
            console.log(row);
            categoryDelete(row).then(res=>{
                console.log(res);
            })
            this.categoryList()
            this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success'
                })
        },
        open1() {
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        })
        },
        // 取消时关闭弹出层
        cancel(){
            this.dialogFormVisible = false
        },
         // 确认时关闭弹出层
        confirm(){
            this.dialogFormVisible = false
            if(this.editOrAdd){
                // true的话就是编辑
                this.form.level=(this.value=='选项1'?'L1':'L2')
                this.form.pid=(this.value=='选项1'? 0 :this.valuePid)
                this.form.iconUrl=this.iconUrl
                this.form.picUrl=this.imageUrl
                categoryUpdate(this.form).then(res=>{
                    console.log(res);
                })
                this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success'
                })
            }else{
                // false的话就是添加
                console.log(this.value);
                this.form.level= (this.value=='选项1'?'L1':'L2')
                console.log(this.valuePid);
                categoryCreate({
                    desc: this.form.desc,
                    keywords: this.form.keywords,
                    level: this.form.level,
                    name: this.form.name,
                    picUrl:this.iconUrl,
                    iconUrl:this.imageUrl,
                    pid:this.valuePid
                }).then(res=>{
                    console.log(res);
                })
                this.categoryList()
                this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success'
                })
            }
        },
        // 上传类目图标方法
        handleAvatarSuccessIcon(res, file) {
            // http://localhost:8080/wx/storage/fetch/enomja52x4mqpjxdo2fl.jpg
            this.iconUrl=res.data.url.replace(/localhost:8080/g, '39.105.50.203:8082')
            console.log(res);
        },
        // 上传图片的方法
        handleAvatarSuccess(res, file) {
            // http://localhost:8080/wx/storage/fetch/enomja52x4mqpjxdo2fl.jpg
            this.imageUrl=res.data.url.replace(/localhost:8080/g, '39.105.50.203:8082')
            console.log(res);
        },
        
    },
    // 生命周期钩子
    mounted(){
        // 调用品牌制造商列表函数 从而调用接口
        this.categoryList()
    }
}
</script>
<style lang="less">
.box{
    padding-right: 40px;
}
// 顶部查询框
.search{
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    .inputUser{
        width: 200px;
        margin-left: 20px;
    }
    .inputNumber{
        width: 200px; 
        margin: 0 10px;
    }
    .export-excel-wrapper{
        margin-left: 10px;
    }
}
// 弹出层 添加或编辑 input框宽度
.el-input{
    width: 550px;
}
// 表格内容
.elTable{
    margin-left:20px;
    margin-top: 20px;
}
.cell{
    text-align: center;
}
.imageSize{
    width: 100px;
    height: 80px;
}
.iconSize{
    width: 60px;
    height: 60px;
}
// 分页
.block{
    margin-left: 20px;
    margin-top: 30px;
}
// 上传图片的样式
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>f